<template>
  <div class="register-box">
    <div class="register">
      <div class="register-content">
        <div class="register-content_left">
          <img :src="data.url" alt />
          <div class="rcl-text">
            <span>免费注册AIBU会员</span>
            <span>立享150元优惠券+100积分</span>
          </div>
        </div>
        <form
          class="register-content_right"
          autocomplete="off"
          action="/user/register"
          @submit.prevent=""
        >
          <h3 class="register-top">注册一个新账户</h3>
          <h3>请填写详细信息</h3>
          <div class="rcr-content">
            <div class="rcrc-text">
              <div class="gd-input-one">
                <span> <b>*</b>手机号码 </span>
                <input
                  type="tel"
                  v-model="tel"
                  placeholder="请填写常用手机号，将作为您的登录账号。"
                  name="account"
                  @change="handleTel"
                />
                <div class="rcrt-common" ref="telRef" v-show="tel_isShow"></div>
              </div>
              <div class="gd-input-one">
                <span class> <b>*</b>姓名 </span>
                <input
                  type="text"
                  name="chineseName"
                  v-model="chineseName"
                  @change="handleName"
                  placeholder="请输入中文名称,名称中不能包含空格"
                />
                <div
                  class="rcrt-common"
                  ref="nameRef"
                  v-show="chineseName_isShow"
                ></div>
              </div>
            </div>
            <div class="rcrc-text">
              <div class="gd-input-one gd-input-one-img">
                <span> <b>*</b>图形验证码 </span>
                <input
                  type="text"
                  name="img-captcha"
                  v-model="svgCaptcha"
                  @change="handleSvgCaptcha"
                />
                <a href="#" @click.prevent="getSvgCode" ref="getSvgCodeRef"
                  >看不清？换张图
                </a>
                <div
                  class="rcrt-common"
                  ref="svgCaptchaRef"
                  v-show="svgCaptcha_isShow"
                ></div>
              </div>
              <div class="gd-input-two">
                <div class="git-common">
                  <span><b>*</b>性别</span>
                  <select
                    class="select-sex"
                    @change="handleSex"
                    v-model="sex"
                    name="sex"
                  >
                    <option
                      v-for="(item, index) in data_sex"
                      :key="index"
                      :value="item"
                    >
                      {{ item }}
                    </option>
                  </select>
                </div>
                <div class="git-birthday">
                  <span><b>*</b>生日</span>
                  <select @change="handleYear" v-model="year" name="year">
                    <option
                      v-for="(item, index) in arr.years"
                      :key="index"
                      :value="item"
                    >
                      {{ item }}
                    </option>
                  </select>
                  <span>年</span>
                  <select
                    name="month"
                    v-model="month"
                    @change="handleMounth(month)"
                  >
                    <option
                      v-for="(item, index) in arr.mounths"
                      :key="index"
                      :value="item"
                    >
                      {{ item }}
                    </option>
                  </select>
                  <span>月</span>
                  <select name="day" v-model="day">
                    <option
                      v-for="(item, index) in arr.days"
                      :key="index"
                      :value="item"
                    >
                      {{ item }}
                    </option>
                  </select>
                  <span>日</span>
                </div>
                <div class="rcrt-common" ref="sexRef" v-show="sex_isShow"></div>
              </div>
            </div>
            <div class="rcrc-text">
              <div class="gd-input-one gd-input-p">
                <span> <b>*</b>验证码 </span>
                <input
                  type="text"
                  name="captcha"
                  v-model="captcha"
                  @change="handleJudgeCaptcha"
                />
                <a href="#" @click.prevent="handleCaptcha"> 获取验证码</a>
                <div
                  class="rcrt-common"
                  ref="captchaRef"
                  v-show="captcha_isShow"
                ></div>
                <div
                  class="rcrt-common"
                  ref="captchaTrueRef"
                  v-show="captchaTrue_isShow"
                  style="color: blue"
                ></div>
              </div>
              <div class="gd-input-two">
                <div class="git-common">
                  <span><b>*</b>鞋码</span>
                  <select
                    class="select-sex"
                    name="showSize"
                    v-model="shoeSize"
                    @change="handleShoeSize"
                  >
                    <option
                      v-for="(item, index) in data_shoeSize"
                      :key="index"
                      :value="item"
                    >
                      {{ item }}
                    </option>
                  </select>
                </div>
                <div class="git-birthday">
                  <span><b>*</b>住址</span>
                  <select
                    name="province"
                    v-model="place_Default.province"
                    @change="handleProvin"
                    :ref="placeRef"
                  >
                    <option
                      v-for="(item, index) in place.provinces"
                      :key="index"
                      :value="item"
                    >
                      {{ item }}
                    </option>
                  </select>
                  <span>省</span>
                  <select
                    name="city"
                    @change="handleCity"
                    v-model="place_Default.city"
                    :ref="placeRef"
                  >
                    <option
                      v-for="(item, index) in place.citys[0]"
                      :key="index"
                      :value="item"
                    >
                      {{ item }}
                    </option>
                  </select>
                  <span>市</span>
                  <select
                    name="area"
                    v-model="place_Default.area"
                    @change="handleArea"
                    :ref="placeRef"
                  >
                    <option
                      v-for="(item, index) in place.areas[0][0]"
                      :key="index"
                      :value="item"
                    >
                      {{ item }}
                    </option>
                  </select>
                  <span>区</span>
                </div>
                <div
                  class="rcrt-common"
                  ref="shoeSizeRef"
                  v-show="shoeSize_isShow"
                ></div>
              </div>
            </div>
            <div class="rcrc-text">
              <div class="gd-input-one">
                <span> <b>*</b>密码 </span>
                <input
                  type="text"
                  placeholder="长度为8-20位的数字或者字母。"
                  name="password"
                  class="rcrct-password"
                  v-model="password"
                  @change="handlePassword"
                  @focus="handlePasswordFocus"
                />
                <div
                  class="rcrt-common"
                  ref="passwordRef"
                  v-show="password_isShow"
                ></div>
              </div>
              <div class="gd-input-one">
                <span> <b>*</b>电子邮件 </span>
                <input
                  type="text"
                  name="e-mail"
                  @change="handleEmail"
                  v-model="eMail"
                />
                <div
                  class="rcrt-common"
                  ref="eMailRef"
                  v-show="eMail_isShow"
                ></div>
              </div>
            </div>
            <div class="rcrc-text">
              <div class="gd-input-one">
                <span> <b>*</b>确认密码 </span>
                <input
                  type="password"
                  v-model="passwordTrue"
                  name="truePassword"
                  @change="handlePasswordTrue"
                />
                <div
                  class="rcrt-common"
                  ref="passwordTrueRef"
                  v-show="passwordTrue_isShow"
                >
                  两次密码输入不一致，请重新输入
                </div>
              </div>
            </div>
          </div>
          <div class="rcrc-center">
            <div class="rcrc-left">
              <input
                type="checkbox"
                value="3"
                v-model="checkbox[0]"
                name="checkbox"
                @change="132"
              />
              <p>订阅邮件轻松获取AIBU新资讯，及时了解产品与活动。</p>
            </div>
            <div class="rcrc-right">
              <input
                type="checkbox"
                value="2"
                v-model="checkbox[1]"
                name="checkbox"
              />
              <p>
                我已了解并接受AIBU网站的
                <a href="#">《隐式政策》</a>、 <a href="#">《条款条件》</a>与
                <a href="#">《会员章程》</a>
              </p>
            </div>
          </div>
          <div class="rcrc-true">
            <input type="submit" value="确认注册" @click="handleRegister" />
            <div v-show="submit_isShow">你还未勾选必选项。</div>
          </div>
          <a href="#" class="rcrc-fotter">点击了解会员权益></a>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from "vue";
import { $get, $post } from "../../request/index";
import { useRoute, useRouter } from "vue-router";

const $route = useRoute();
const $router = useRouter();
//手机号的正则判断
const tel = ref("");
const telRef = ref("");
let tel_isShow = ref(false);
function handleTel() {
  // 手机号的正则
  let reg =
    /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
  if (tel.value == "") {
    telRef.value.innerText = "手机号不能为空，请输入手机号";
    tel_isShow.value = true;
  } else if (reg.test(tel.value)) {
    tel_isShow.value = false;
  } else {
    telRef.value.innerText = "手机号格式错误，请重新输入。";
    tel_isShow.value = true;
  }
}

const data = reactive({
  url: "../../public/images/user/register_aside.jpg",
});
// 在该元素下生成图形验证码
let getSvgCodeRef = ref(null);
// 随机图形验证码的值
let random_svgCaptcha = "";
// 图形验证码input框的数据
let svgCaptcha = ref("");

let svgCaptchaRef = ref(false);
let svgCaptcha_isShow = ref(false);

function handleSvgCaptcha() {
  // 将图形验证码值转小写
  let LowerCase = svgCaptcha.value.toLowerCase();
  console.log(LowerCase);
  console.log("图形验证码密码：", random_svgCaptcha);
  if (svgCaptcha.value === "") {
    svgCaptchaRef.value.innerText = "图形验证码不能为空，请输入图形验证码";
    svgCaptcha_isShow.value = true;
  } else if (LowerCase != random_svgCaptcha) {
    svgCaptchaRef.value.innerText = "验证码错误，请重新输入验证码";
    svgCaptcha_isShow.value = true;
  } else {
    svgCaptcha_isShow.value = false;
  }
}

function DefaultSvgcodeRequest() {
  $get("/user/captcha").then((backData) => {
    let svg = document.createElement("div");
    svg.innerHTML = backData.tag;
    getSvgCodeRef.value.appendChild(svg);
    svg.lastElementChild.style.position = "absolute";
    svg.lastElementChild.style.left = "calc(-230%)";
    svg.lastElementChild.style.top = 0 + "px";
    // 图形验证码英文转小写
    random_svgCaptcha = backData.text.toLowerCase();
  });
}
// 默认发送一次图形验证码
DefaultSvgcodeRequest();
// 更换图形验证码
function getSvgCode() {
  let el = getSvgCodeRef.value.lastElementChild;
  el.remove();
  DefaultSvgcodeRequest();
}
const data_sex = reactive(["男", "女"]);
let data_shoeSize = reactive([29, 30, 31, 32, 33, 34, 35, 36, 37, 38]);
const arr = reactive({
  years: [
    1988, 1989, 1990, 1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999,
    2000, 2001, 2002, 2004, 2005, 2006, 2007, 2008,
  ],
  mounths: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
  days: [
    1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21,
    22, 23, 24, 25, 26, 27, 28, 29, 31,
  ],
});

let years = ref(new Date().getFullYear() - 18);
let year = ref(years);
const month = ref(1);
const day = ref(1);
// 闰年的判断，
function handleYear() {
  if (year.value % 400 == 0 || (year.value % 4 == 0 && year.value % 100 != 0)) {
    arr.days.splice(28, arr.days.length, 29);
  } else {
    arr.days.splice(28, arr.days.length);
    if (month.value == 2 && day.value == 29) {
      day.value = 28;
    }
  }
}
// 月份和每月天数的逻辑
function handleMounth(item) {
  if (item == 2) {
    if (
      year.value % 400 == 0 ||
      (year.value % 4 == 0 && year.value % 100 != 0)
    ) {
      arr.days.splice(28, arr.days.length, 29);
    } else {
      arr.days.splice(28, arr.days.length);
    }
  } else {
    // 1-7月的判断
    if (item < 7) {
      if (item % 2 == 0) {
        arr.days.splice(28, arr.days.length, 29, 30);
      } else {
        arr.days.splice(28, arr.days.length, 29, 30, 31);
      }
    } else {
      if (item % 2 == 0) {
        arr.days.splice(28, arr.days.length, 29, 30, 31);
      } else {
        arr.days.splice(28, arr.days.length, 29, 30);
      }
    }
  }
  //当 月份的最大值没有 当前的日期时，改变当前的日期
  if (day.value > arr.days[arr.days.length - 1]) {
    day.value = arr.days[arr.days.length - 1];
  }
}

// 省市区的3级联动功能
const place = reactive({
  provinces: ["中国", "韩国", "台湾"],
  citys: [
    [
      "安徽",
      "北京",
      "福建",
      "⽢肃",
      "⼴东",
      "⼴西",
      "贵州",
      "海南",
      "河北",
      "河南",
      "⿊龙江",
      "湖北",
      "湖南",
      "吉林",
      "江苏",
      "江西",
      "辽宁",
      "内蒙古",
      "宁夏",
      "青海",
      "⼭东",
      "⼭西",
    ],
    ["汉城特別市", "釜⼭⼴域市", "⼤邱⼴域市", "济州道"],
    [
      "基隆",
      "台北",
      "桃园",
      "新⽵",
      "苗栗",
      "台中",
      "彰化",
      "南投",
      "云林",
      "嘉义",
      "台南",
      "⾼雄",
      "台东",
      "花莲",
    ],
  ],
  areas: [
    [
      [
        "安庆",
        "蚌埠",
        "巢湖",
        "池州",
        "滁州",
        "⾩阳",
        "合肥",
        "淮北",
        "淮南",
        "黄⼭",
        "六安",
        "马鞍⼭",
        "宿州",
        "铜陵",
        "芜湖",
        "宣城",
        "亳州",
      ],
      ["北京"],
      ["福州", "龙岩", "南平", "宁德", "莆⽥", "泉州", "三明", "厦门", "漳州"],
      [
        "⽩银",
        "定西",
        "⽢南藏族⾃治州",
        "嘉峪关",
        "⾦昌",
        "酒泉",
        "兰州",
        "临夏回族⾃治州",
        "陇南",
        "平凉",
        "庆阳",
        "天⽔",
        "武威",
        "张掖",
      ],
      [
        "潮州",
        "东莞",
        "佛⼭",
        "⼴州",
        "河源",
        "深圳",
        "阳江",
        "云浮",
        "湛江",
        "肇庆",
        "中⼭",
        "珠海",
      ],
      [
        "百⾊",
        "北海",
        "崇左",
        "防城港",
        "桂林",
        "贵港",
        "河池",
        "贺州",
        "来宾",
        "柳州",
        "南宁",
        "钦州",
        "梧州",
        "⽟林",
      ],
      [
        "安顺",
        "毕节",
        "贵阳",
        "六盘⽔",
        "黔东南苗族侗族⾃治州",
        "黔南布依族苗族⾃治州",
        "黔西南布依族苗族⾃治州",
        "铜仁",
        "遵义",
      ],
      [
        "澄迈县",
        "定安县",
        "东⽅",
        "海⼝",
        "琼中黎族苗族⾃治县",
        "三亚",
        "屯昌县",
        "万宁",
        "⽂昌",
        "五指⼭",
        "儋州",
      ],
      [
        "保定",
        "沧州",
        "承德",
        "邯郸",
        "衡⽔",
        "廊坊",
        "秦皇岛",
        "⽯家庄",
        "唐⼭",
        "邢台",
        "张家⼝",
      ],
      [
        "安阳",
        "鹤壁",
        "济源",
        "焦作",
        "开封",
        "洛阳",
        "南阳",
        "平顶⼭",
        "三门峡",
        "商丘",
        "新乡",
        "信阳",
        "许昌",
        "郑州",
        "周⼝",
        "驻马店",
        "漯河",
        "濮阳",
      ],
      [
        "⼤庆",
        "⼤兴安岭",
        "哈尔滨",
        "鹤岗",
        "⿊河",
        "鸡西",
        "佳⽊斯",
        "牡丹江",
        "七台河",
        "齐齐哈尔",
        "双鸭⼭",
        "绥化",
        "伊春",
      ],
      [
        "鄂州",
        "恩施⼟家族苗族⾃治州",
        "黄冈",
        "黄⽯",
        "荆门",
        "荆州",
        "潜江",
        "神农架林区",
        "⼗堰",
        "随州",
        "天门",
        "武汉",
        "仙桃",
        "咸宁",
        "襄樊",
        "孝感",
        "宜昌",
      ],
      [
        "常德",
        "长沙",
        "郴州",
        "衡阳",
        "怀化",
        "娄底",
        "邵阳",
        "湘潭",
        "湘西⼟家族苗族⾃治州",
        "益阳",
        "永州",
        "岳阳",
        "张家界",
        "株洲",
      ],
      [
        "⽩城",
        "⽩⼭",
        "长春",
        "吉林",
        "辽源",
        "四平",
        "松原",
        "通化",
        "延边朝鲜族⾃治州",
      ],
      [
        "常州",
        "淮安",
        "连云港",
        "南京",
        "南通",
        "苏州",
        "宿迁",
        "泰州",
        "⽆锡",
        "徐州",
        "盐城",
        "扬州",
        "镇江",
      ],
      [
        "抚州",
        "赣州",
        "吉安",
        "景德镇",
        "九江",
        "南昌",
        "萍乡",
        "上饶",
        "新余",
        "宜春",
        "鹰潭",
      ],
      [
        "鞍⼭",
        "本溪",
        "朝阳",
        "⼤连",
        "丹东",
        "抚顺",
        "⾩新",
        "葫芦岛",
        "锦州",
        "辽阳",
        "盘锦",
        "沈阳",
        "铁岭",
        "营⼝",
      ],
      [
        "阿拉善盟",
        "巴彦淖尔盟",
        "包头",
        "⾚峰",
        "鄂尔多斯",
        "呼和浩特",
        "呼伦贝尔",
        "通辽",
        "乌海",
        "乌兰察布盟",
        "锡林郭勒盟",
        "兴安盟",
      ],
      ["固原", "⽯嘴⼭", "吴忠", "银川"],
      [
        "果洛藏族⾃治州",
        "海北藏族⾃治州",
        "海东",
        "海南藏族⾃治州",
        "海西蒙古族藏族⾃治州",
        "黄南藏族⾃治州",
        "西宁",
        "⽟树藏族⾃治州",
      ],
      [
        "滨州",
        "德州",
        "东营",
        "菏泽",
        "济南",
        "济宁",
        "莱芜",
        "聊城",
        "临沂",
        "青岛",
        "⽇照",
        "泰安",
        "威海",
        "潍坊",
        "烟台",
        "枣庄",
        "淄博",
      ],
    ],
    [
      ["汉城"],
      ["釜⼭", "机张郡"],
      ["⼤邱", "达城郡"],
      ["仁川", "江华郡", "瓮津郡"],
      ["光州"],
      ["⼤⽥"],
      ["蔚⼭", "蔚州郡"],
      ["⽔原市", "城南市", "安⼭市", "⾼阳市", "安养市", "富川市"],
      ["春川市", "原州市", "江陵市"],
      ["清州市"],
      ["天安市"],
      ["全州市", "群⼭市", "益⼭市"],
      ["⽊浦市", "丽⽔市", "顺天市"],
      ["浦项市", "龟尾市", "庆州市"],
      ["昌原市", "马⼭市", "晋州市"],
      ["济州市", "西归浦市", "北济州郡", "南济州郡"],
    ],
    [["基隆"], ["台北"]],
  ],
});

// 省市区  响应式的默认值
let place_Default = reactive({
  province: place.provinces[0],
  city: place.citys[0][0],
  area: place.areas[0][0][0],
});
// 获取省 市 区份的下标
let pro_index = 0;
let city_index = 0;
let area_index = 0;
// 生成添加option元素
function createOptions(el, vari) {
  for (let b = 0; b < vari.length; b++) {
    let option = new Option();
    option.value = vari[b];
    option.innerText = vari[b];
    el.appendChild(option);
  }
}
// 省市 省区联动
function handleProvin(e) {
  pro_index = e.target.selectedIndex;
  // 清空市区内的内容
  el_place.value[1].innerHTML = "";
  el_place.value[2].innerHTML = "";
  createOptions(el_place.value[1], place.citys[pro_index]);
  createOptions(el_place.value[2], place.areas[pro_index][0]);
}
// 市区联动
function handleCity(e) {
  area_index = e.target.selectedIndex;
  // 清空市区内的内容
  el_place.value[2].innerHTML = "";
  createOptions(el_place.value[2], place.areas[pro_index][area_index]);
}

// 获取:ref=placeRef元素
let el_place = ref([]);
const placeRef = (el) => {
  el_place.value.push(el);
};

// 验证码弹窗
let captcha_count = null;
function handleCaptcha() {
  for (let i = 0; i < 6; i++) {
    let random = Math.floor(Math.random() * 10).toString();
    if (i == 0) {
      captcha_count = random;
      continue;
    }
    captcha_count += random;
  }
  alert("请输入验证码：" + captcha_count);
}

// 输入验证码判断
const captcha = ref("");
let captchaRef = ref();
let captcha_isShow = ref(false);

let captchaTrueRef = ref();
let captchaTrue_isShow = ref(false);
function handleJudgeCaptcha() {
  if (captcha_count === null) {
    captchaRef.value.innerText = "还没有输入验证码？请先获取验证码";
    captchaRef.value.style.color = "red";
    captcha_isShow.value = true;
    captchaTrue_isShow.value = false;
  } else if (captcha.value == "") {
    captchaRef.value.innerText = "验证码不能为空，请输入验证码";
    captchaRef.value.style.color = "red";
    captcha_isShow.value = true;
    captchaTrue_isShow.value = false;
    return;
  } else if (captcha.value == captcha_count) {
    captchaTrueRef.value.innerText = "验证码输入正确";
    captchaTrue_isShow.value = true;
    captcha_isShow.value = false;
  } else {
    captchaRef.value.innerText = "验证码输入错误，请重新输入";
    captchaRef.value.style.color = "red";
    captcha_isShow.value = true;
    captchaTrue_isShow.value = false;
  }
}
// 密码验证
const password = ref("");
const passwordRef = ref("");
let password_isShow = ref(false);
function handlePassword() {
  // 密码不能为空
  if (password.value == "") {
    passwordRef.value.innerText = "密码不能为空，请设置密码。";
    passwordRef.value.style.color = "red";
    password_isShow.value = true;
    return;
  }
  const reg = /^[0-9A-z]{8,20}$/;
  if (reg.test(password.value)) {
    password_isShow.value = false;
  } else {
    passwordRef.value.innerText = "密码格式不正确.请重新输入";
    passwordRef.value.style.color = "red";
    password_isShow.value = true;
  }
}
// 密码框聚焦，确认密码框报错隐藏
function handlePasswordFocus() {
  if (passwordTrue_isShow.value == true) {
    passwordTrue.value = "";
    passwordTrue_isShow.value = false;
  }
}
// 密码确认验证
const passwordTrue_isShow = ref("");
const passwordTrueRef = ref("");
const passwordTrue = ref("");
function handlePasswordTrue() {
  if (password.value == "") {
    passwordTrueRef.value.innerText = "密码还未设置，请先设置密码";
    passwordTrue_isShow.value = true;
    return;
  } else if (passwordTrue == "") {
    passwordTrueRef.value.innerText = "确认密码不能为空";
    passwordTrue_isShow.value = true;
  } else if (password.value == passwordTrue.value) {
    passwordTrueRef.value.innerText = "";
    passwordTrue_isShow.value = false;
  } else {
    passwordTrueRef.value.innerText = "两次密码输入不一致，请重新输入";
    passwordTrue_isShow.value = true;
  }
}

// 姓名的中文验证
const chineseName = ref("");
const nameRef = ref("");
let chineseName_isShow = ref(true);
function handleName() {
  // 中文验证
  let reg = /^[\u4E00-\u9FA5]{2,6}$/;
  // 匹配空格
  let reg_ = /\s/i;
  // 空格验证
  if (reg_.test(chineseName.value)) {
    nameRef.value.innerText = "名称中不能出现空格";
    chineseName_isShow.value = true;
  } else if (chineseName.value == "") {
    nameRef.value.innerText = "名称不能为空，请设置名称";
    chineseName_isShow.value = true;
  } else if (chineseName.value.length <= 6 && chineseName.value.length >= 2) {
    if (reg.test(chineseName.value)) {
      chineseName_isShow.value = false;
    } else {
      nameRef.value.innerText = "名称不合法，请输入中文";
      chineseName_isShow.value = true;
    }
  } else if (chineseName.value.length < 2) {
    nameRef.value.innerText = "名称长度不能小于两个汉字";
    chineseName_isShow.value = true;
  } else if (chineseName.value.length > 6) {
    nameRef.value.innerText = "名称长度不能超过六个汉字";
    chineseName_isShow.value = true;
  } else {
    chineseName_isShow.value = false;
  }
}

// e-mail 的验证
const eMail = ref("");
let eMail_isShow = ref(false);
const eMailRef = ref();
function handleEmail() {
  if (eMail.value == "") {
    eMailRef.value.innerText = "e-mail不能为空，请设置e-mail。";
    eMail_isShow.value = true;
  } else {
    let reg =
      /^[A-Za-z0-9\-_]+[A-Za-z0-9\.\-_]*[A-Za-z0-9\-_]+@[A-Za-z0-9]+[A-Za-z0-9\.\-_]*(\.[A-Za-z0-9\.\-_]+)*[A-Za-z0-9]+\.[A-Za-z0-9]+[A-Za-z0-9\.\-_]*[A-Za-z0-9]+$/;
    if (reg.test(eMail.value)) {
      eMail_isShow.value = false;
    } else {
      eMailRef.value.innerText = "e-mail格式有误，请重新设置";
      eMail_isShow.value = true;
    }
  }
}
// sex内容
const sex = ref("");
const sexRef = ref("");
let sex_isShow = ref(false);
//判断sex是否为空
function handleSex() {
  if (sex.value == "") {
    sexRef.value.innerText = "性别不能为空";
    sex_isShow.value = true;
  } else {
    sex_isShow.value = false;
  }
}

// 鞋子码数
const shoeSize = ref("");
const shoeSizeRef = ref("");
let shoeSize_isShow = ref(false);
// 鞋码不能为空的功能判断
function handleShoeSize() {
  if (shoeSize.value == "") {
    shoeSizeRef.value.innerText = "鞋码不能为空,请选择鞋码";
    shoeSize_isShow.value = true;
  } else {
    shoeSize_isShow.value = false;
  }
}

// 多选框的选中时，获取多选框的value值
let checkbox = reactive([false, false]);
let checkboxLength = 0;
let submit_isShow = ref(false);
// 注册按钮 功能实现
function handleRegister() {
  // 判断复选框是否选中 ，未选中则显示文字
  let data = checkbox.filter((item) => {
    return item == true;
  });
  checkboxLength = data.length;
  if (checkbox.length == data.length) {
    submit_isShow.value = false;
  } else {
    submit_isShow.value = true;
  }
  handleTel();
  handleName();
  handlePassword();
  handleJudgeCaptcha();
  handleSvgCaptcha();
  handlePasswordTrue();
  handleEmail();
  handleSex();
  handleShoeSize();
  //当必填项都有内容，且不报错时，发送Ajax请求
  let isRequert = false;
  if (
    tel_isShow.value !== true &&
    captchaTrue_isShow.value === true &&
    svgCaptcha_isShow.value !== true &&
    password_isShow.value !== true &&
    passwordTrue_isShow.value !== true &&
    chineseName_isShow.value !== true &&
    eMail_isShow.value !== true &&
    sex_isShow.value !== true &&
    place_Default.province !== "" &&
    place_Default.city !== "" &&
    place_Default.area !== "" &&
    checkboxLength === checkbox.length
  ) {
    isRequert = true;
  }
  if (isRequert === true) {
    $post("/user/register", {
      tel: tel.value,
      password: password.value,
      eMail: eMail.value,
      information: {
        chineseName: chineseName.value,
        sex: sex.value,
        tel: tel.value,
        eMail: eMail.value,
        shoeSize: shoeSize.value,
        birthday: {
          year: year.value,
          month: month.value,
          day: day.value,
        },
        address: {
          province: place_Default.province,
          city: place_Default.city,
          area: place_Default.area,
        },
      },
    })
      .then((data) => {
        if (data.code == 200) {
          alert(data.msg);
          $router.push("/login");
        } else if (data.code == -100) {
          telRef.value.innerText = data.tel;
          tel_isShow.value = true;
          eMailRef.value.innerText = data.eMail;
          eMail_isShow.value = true;
          nameRef.value.innerText = data.name;
          chineseName_isShow.value = true;
        } else if (data.code == -200) {
          telRef.value.innerText = data.tel;
          tel_isShow.value = true;
        } else if (data.code == -300) {
          eMailRef.value.innerText = data.eMail;
          eMail_isShow.value = true;
        } else if (data.code == -400) {
          nameRef.value.innerText = data.name;
          chineseName_isShow.value = true;
        }else{
           alert(data.msg)
        }
      })
      .catch((err) => console.log(err));
    isRequert = false;
  }
}
</script>

<style lang="less" scoped>
// 登录注册页面公共样式
// [v-cloak] {
//   display: none !important;
// }
.left {
  float: left;
}
.right {
  float: right;
}
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
.clearfix {
  zoom: 1;
}
.register-box {
  height: 100vh;
  width: 100vw;
  background: url("../../public/images/user/register_bgg.jpg") no-repeat center
    center/cover;
  user-select: none;
  overflow: hidden;
  .register {
    width: 1520px;
    margin: 0 auto;
    // 去除滚动条
    overflow: hidden;
    box-shadow: 0px 0px 36px -8px rgb(0 0 0 / 50%);
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    .register-content {
      display: flex;
      width: 100%;
      .register-content_left {
        width: 376px;
        position: relative;
        img {
          width: 100%;
          height: 778px;
          vertical-align: middle;
        }
        .rcl-text {
          width: 100%;
          position: absolute;
          color: #fff;
          top: 586px;
          display: flex;
          flex-direction: column;
          padding-left: 30px;
          text-align: left;
          & > span:nth-of-type(1) {
            font-size: 36px;
          }
          & > span:nth-of-type(2) {
            margin-top: 10px;
            font-size: 20px;
          }
        }
      }
      .register-content_right {
        flex: 1;
        padding: 30px;
        font-size: 14px;
        box-sizing: border-box;
        .register-top {
          text-align: center;
          font-size: 30px;
        }
        h3 {
          text-align: left;
        }
        input {
          border: none;
          border-bottom: 1px solid #000;
          outline: none;
          padding-bottom: 2px;
        }
        input::placeholder {
          color: #4b0414;
          font-size: 14px;
        }
        .rcr-content {
          width: 100%;
          text-align: left;
          .rcrc-text {
            display: flex;
            justify-content: space-between;
          }
          // 图形验证码单独的样式
          .gd-input-one-img {
            position: relative;
            a {
              height: 40px;
              position: absolute;
              right: 0;
              top: 8px;
              width: 60px;
              font-size: 14px;
              .vercode {
                width: 124px;
                height: 38px;
                position: absolute;
                left: calc(-230%);
                top: 0px;
              }
            }
          }
          // input-one公用的样式
          .gd-input-one {
            display: flex;
            align-items: center;
            height: 64px;
            position: relative;
            span {
              width: 100px;
              padding-top: 12px;
              b {
                position: relative;
                top: 4px;
                margin: 0 6px;
              }
            }
            input {
              height: 40px;
              box-sizing: border-box;
              padding-top: 10px;
            }
            input {
              width: 420px;
            }
          }
          // 验证码单独的样式
          .gd-input-p {
            position: relative;
            a {
              position: absolute;
              right: 0;
              top: 26px;
            }
          }
          .gd-input-two {
            display: flex;
            width: 520px;
            justify-content: space-between;
            height: 64px;
            position: relative;
            .git-common {
              display: flex;
              align-items: center;
              span {
                width: 100px;
                padding-top: 12px;
                b {
                  position: relative;
                  top: 4px;
                  margin: 0 6px;
                }
              }
            }
            .git-birthday {
              width: 420px;
              display: flex;
              justify-content: space-around;
              align-items: center;
              select {
                width: 60px;
              }
              span {
                padding-top: 12px;
                b {
                  position: relative;
                  top: 4px;
                  margin: 0 6px;
                }
              }
            }
            .select-sex {
              width: 56px;
            }
            select {
              outline: none;
              font-size: 14px;
              height: 24px;
              margin-top: 14px;
              border: none;
              border-bottom: 1px solid #000;
            }

            input {
              width: 70px;
            }
          }
        }
        // 验证错误时，报错文字的公共样式
        .rcrt-common {
          position: absolute;
          left: 100px;
          top: 56px;
          color: red;
        }
        .rcrc-center {
          display: flex;
          color: #616265;
          justify-content: space-between;
          margin: 40px;
          font-size: 14px;
          a {
            color: #000000;
          }
          .rcrc-left,
          .rcrc-right {
            display: flex;
            justify-content: center;
            align-items: center;
            input {
              margin-right: 4px;
              cursor: pointer;
            }
          }
        }
        .rcrc-true {
          width: 200px;
          height: 46px;
          text-align: center;
          position: relative;
          margin: 0 auto;
          input {
            width: 100%;
            height: 100%;
            border-radius: 4px;
            background-color: #000;
            color: #fff;
            line-height: 46px;
            cursor: pointer;
          }
          div {
            position: absolute;
            top: calc(100% + 3px);
            width: 100%;
            left: 0;
            color: red;
          }
        }
        .rcrc-fotter {
          display: block;
          width: 100%;
          height: 120px;
          margin: 60px auto 0;
          background: url("../../public/images/user/register-fotter.jpg")
            no-repeat center center/cover;
          text-align: center;
          line-height: 120px;
          color: #fff;
          font-size: 50px;
        }
      }
    }
  }
}
</style>